//自定义扇形节点
G6.registerNode('circleBar', {
  draw: (cfg, group) => {
    var baseR = 30
    var nowAngle = 0
    var everyIncAngle = (2 * Math.PI * (360 / cfg.details.length)) / 360
    cfg.details.forEach((cat) => {
      var re = cat.values + baseR
      var fan = group.addShape('fan', {
        attrs: {
          x: 0,
          y: 0,
          rs: baseR, // 内圈半径
          re: cat.values + baseR, // 外圈半径
          startAngle: nowAngle, // 开始角度
          endAngle: (nowAngle += everyIncAngle), // 结束角度
          clockwise: false, // 逆时针
          stroke: 'darkgray',
          fill: cat.color
        }
      })
      var img = group.addShape('image', {
        attrs: cat.attrs
      })
      // 加上交互动画
      fan.on('mouseenter', function(evt) {
        fan.animate(
          {
            re: re + 2,
            repeat: false
          },
          300
        )
      })
      fan.on('mouseleave', function(evt) {
        fan.animate(
          {
            re: re,
            repeat: false
          },
          300
        )
      })
      img.on('mouseenter', function(evt) {
        fan.animate(
          {
            re: re + 2,
            repeat: false
          },
          300
        )
      })
      // 点击扇形
      fan.on('click', () => {
        // cat是扇形参数,cfg是节点参数
        this.nowNode = { id: cfg.id, label: cfg.label, cat: cat.cat, flag: cfg.flag }
        this.changeMenu()
      })
      // 点击图标
      img.on('click', () => {
        this.nowNode = { id: cfg.id, label: cfg.label, cat: cat.cat, flag: cfg.flag }
        this.changeMenu()
      })
      // 设置class
      fan.set('className', 'littleCircle')
    })
    group.addShape('circle', {
      attrs: {
        x: 0, // 居中
        y: 0,
        r: baseR,
        fill: cfg.centerColor
      }
    })
    if (cfg.label) {
      group.addShape('text', {
        attrs: {
          x: 0, // 居中
          y: 0,
          textAlign: 'center',
          textBaseline: 'middle',
          text: cfg.label,
          fill: '#000',
          fontSize: 11
          // fontStyle: "bold",
        }
      })
    }
    return group
  }
})

//自定义矩形
G6.registerNode('expandNode', {
  getAnchorPoints() {
    return [[0, 0.5], [1, 0.5]]
  },
  draw: function draw(cfg, group) {
    var mainGroup = group.addGroup({
      id: 'main-group'
    })
    var keyShape = mainGroup.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: 90 * cfg.values.length,
        height: 40,
        fill: '#f5f5f5' // 添加底色
      }
    })
    var subGroup = group.addGroup({
      id: 'sub-group'
    })
    cfg.values.forEach(function(data, index) {
      subGroup.addShape('rect', {
        attrs: {
          x: index * 90,
          y: 0,
          width: 90,
          height: 40,
          stroke: '#ffffff' // 添加边框
        }
      })
      subGroup.addShape('text', {
        attrs: {
          text: data,
          fill: '#000',
          x: 15 + index * 90,
          y: 20,
          fontSize: 12,
          textBaseline: 'middle',
          className: 'sub-group-text'
        }
      })
    })
    return keyShape
  }
}, 'rect')